import Reac, { useEffect } from 'react'
import { Button, Checkbox, List } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { dellist,changesed,async_getlist } from './store/todoSlice'



export default function Listcom() {

  let obj = useSelector(state => state.todos11)
  //console.log(obj);

  let diapatch = useDispatch()

  //初始周期 中调取rtk异步方法
  useEffect(()=>{
    diapatch(async_getlist())
  },[])

  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: 10 }}>

      <List
        itemLayout="horizontal"
        dataSource={obj.todolist}
        renderItem={(item, index) => (
          <List.Item actions={[<Button onClick={() => {
            //执行删除
            diapatch(dellist(item.id))

          }}>删除</Button>]}>
            <List.Item.Meta
              title={item.title}
              avatar={<Checkbox
                checked={item.sed} onChange={() => {
                  diapatch(changesed(item.id))
                }} />} />
          </List.Item>
        )}
      />
    </div>
  )
}
